<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../jslib/Vue.js"></script>
</head>
<body>

    <div id="div1">

        <!--数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：-->
        <span>Message: {{ msg }}</span>

        <!--通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新-->
        <span v-once>这个将不会改变: {{ msg }}</span>

        <!--为了输出真正的 HTML，你需要使用 v-html 指令：
            你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
            请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
        -->
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>


    </div>


    <!--Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：-->
    <div v-bind:id="dynamicId"></div>




    <script>

        var vm = new Vue({
            el: '#div1',
            data: {
                msg: 'hello',
                rawHtml: '<input type="text">'
            }
        })
    </script>
</body>
</html>